<template>
  <div class="box1">
    <el-container>
      <el-header>
        <div>
          <span></span>
          <p>
            <span>admin</span>
            <span>logout</span>
            <span>
              <i class="el-icon-shopping-cart-full"></i>
            </span>
          </p>
        </div>
        <aside>/Home/Goods</aside>
      </el-header>
      <div class="box2">
        <aside>
          <span>price:</span>
          <p @click="dj">
            <span v-show="flag == true">↑</span>
            <span v-show="flag == false">↓</span>
            <!-- <span v-show='flag?"↑":"↓"'></span> -->
          </p>
        </aside>
      </div>
      <el-container v-loading="loading">
        <el-aside width="200px">
          <van-sidebar v-model="activeKey" class="ce" @change="index">
            <van-sidebar-item title="ALL" />
            <van-sidebar-item title="0.00——100.00" />
            <van-sidebar-item title="100.00——500.00" />
            <van-sidebar-item title="500.00——1000.00" />
            <van-sidebar-item title="1000.00——2000.00" />
          </van-sidebar>
        </el-aside>
        <el-main>
          <!-- <div class="right"> -->
          <dl v-for="(item, key) in fenlist1" :key="key">
            <dt>
              <el-image :src="'/img/' + item.productImage"></el-image>
            </dt>
            <dd>
              <p>{{ item.productName }}</p>
              <p>￥{{ item.salePrice }}</p>
              <p>
                <el-button @click="cart(item)">加入购物车</el-button>
              </p>
            </dd>
          </dl>
          <!-- </div> -->
           <p v-show='number==4'>我也是有底线的</p>
        </el-main>
      </el-container>
    </el-container>
    <!-- 加入购物车弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>加入购物车</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  data() {
    return {
      //加入购物车的信息
      items: {},
      dialogVisible: false,
      flag: true,
      activeKey: 0,
      list: [],
      fenlist1: [],
      number: 1,
      loading: false,
    };
  },
  methods: {
    dj() {
      this.flag = !this.flag;
      this.fenlist1.reverse();
    },
    //左侧切换
    index() {
      console.log(this.activeKey);
      var index = this.activeKey;
      if (index == 0) {
        this.fenlist(0, 2000);
      } else if (index == 1) {
        this.fenlist(0, 100);
      } else if (index == 2) {
        this.fenlist(100, 500);
      } else if (index == 3) {
        this.fenlist(500, 1000);
      } else if (index == 4) {
        this.fenlist(1000, 2000);
      }
    },
    //右侧数据
    fenlist(a, b) {
      console.log(this.list);
      var fenlist = this.list.filter((item, key) => {
        return item.salePrice >= a && item.salePrice <= b;
      });
      this.fenlist1 = fenlist;
      this.fenlist1.sort((a, b) => {
        return a.salePrice - b.salePrice;
      });
    },
    //加入购物车
    cart(items) {
      this.items = {};
      this.items = items;
      this.dialogVisible = true;
    },
    //确定加入
    yes() {
      var cart = this.$store.state.cart;
      var index = cart.findIndex((item, key) => {
        return item.id == this.items._id;
      });
      if (index != -1) {
        this.$store.commit("addnum", index);
      } else {
        var obj = {
          id: this.items._id,
          price: this.items.salePrice,
          number: 1,
          img: this.items.productImage,
          flag: false,
        };
        this.$store.commit("addcart", obj);
      }
      this.dialogVisible = false;
      this.$router.push("/home/cart");
    },
    get() {

      if (this.number >  3) {
        return false;
      }
      this.loading = true;
      setTimeout(() => {
        this.$http.get(`/data/data${this.number}.json`).then((res) => {
          this.list.push(...res.data.result.list);
          // list.forEach((item, key) => {
          //   this.list.push(item);
          // });
          // this.fenlist1 = this.list;
          //console.log(this.list);
          this.fenlist1 = this.list;
          console.log(this.number)
          this.number++;
          this.loading = false;
         
        });
      }, 500);
    },
  },
  mounted() {
    this.get();
    window.addEventListener("scroll", () => {
      var html = document.documentElement;
      // console.log(html.scrollHeight)
      // console.log(html.scrollTop)
      // console.log(html.clientHeight)
      if (html.scrollTop + html.clientHeight >= html.scrollHeight) {
        // console.log(1);
        this.get();
      }
    });
    // this.$http.get("/data/data2.json").then((res) => {
    //   //console.log(res);
    //   var list = res.data.result.list;
    //   this.list.push(...list);
    //   //console.log(this.list);
    // });
    // this.$http.get("/data/data3.json").then((res) => {
    //   //console.log(res);
    //   var list = res.data.result.list;
    //   this.list.push(...list);
    //   this.fenlist1 = this.list;
    //   //console.log(this.list);
    // });
  },
};
</script>

<style lang='scss' scoped>
.box1 {
  width: 100%;
  height: 100%;
  & > .el-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-container {
      flex: 1;
    }
  }
  .el-header {
    background-color: #ffffff;
    color: #333;
    height: 100px;
    padding: 0;
    div {
      width: 100%;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      p {
        span {
          margin-right: 10px;
        }
      }
    }
    aside {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      background: #cccccc;
      padding: 0 20px;
    }
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
    .ce {
      width: 200px;
    }
  }

  .el-main {
    width: 100%;
    height: 100%;
    background-color: #e9eef3;
    color: #333;
    display: flex;
    flex-wrap: wrap;
    overflow: auto !important;
    dl {
      width: 22%;
      //   height: 408px;
      box-shadow: 0 0 10px;
      margin-bottom: 18px;
      margin-left: 3%;
      dt {
        width: 100%;
        .van-image {
          width: 100%;
          //   height: 70%;
        }
      }
      dd {
        width: 100%;
        .el-button {
          width: 90%;
          margin-left: 5%;
          margin-bottom: 10px;
        }
      }
    }
    dl:hover {
      transform: scale(1.05);
      border: 1px solid rgb(255, 51, 0);
    }
  }
  .box2 {
    width: 100%;
    background: #d3dce6;
    height: 40px;
    display: flex;
    justify-content: center;
    aside {
      width: 80%;
      height: 40px;
      background: #ffffff;
      display: flex;
      p {
        cursor: pointer;
      }
    }
  }
}
</style>